<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-tree
          :data="cateTree"
          :props="defaultProps"
          @node-click="handleNodeClick"
          ref="tree"
        ></el-tree>
      </el-col>
      <el-col :span="18">
        <router-link :to="{path:'/product/addGroup',query:{cateId:categoryId}}">
        <el-button v-if="this.categoryId">添加分组</el-button>
        </router-link>
        <el-table
          :data="attrGroups"
          :stripe="true"
          style="width: 100%">
          <el-table-column
            prop="attrGroupId"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="attrGroupName"
            label="分组名">
          </el-table-column>
          <el-table-column
            prop="descript"
            label="描述">
          </el-table-column>

          <el-table-column
            prop="sort"
            label="排序">
          </el-table-column>

          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <router-link to=""><el-button>修改</el-button></router-link>
              <el-button @click="openDialog(scope.row.attrGroupId)">关联</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog title="关联属性" :visible.sync="dialogFormVisible">
      <el-form>
        <el-transfer
          :titles="['所有属性','关联属性']"
          v-model="attrIds" :data="attrList" :props="{key:'attrId',label:'attrName'}"></el-transfer>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRelation">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
    export default {
        name: "",
      data(){
          return {
            cateTree:[],
            defaultProps:{
              children: 'children',
              label: 'categoryName'
            },
            attrGroups:[],
            dialogFormVisible:false,//默认情况下弹出层要隐藏起来
            attrList:[],
            categoryId:"",
            attrIds:[],
            groupId:"",
          }
      },
      created(){
          this.axios.get("/category/selectCateTree").then((resp)=>{
            this.cateTree=resp.data;
          });
          //通过路由拿到cateId，发出ajax请求，给table表格附上值。
      },
      methods:{
        //你点击了树哪个节点
        handleNodeClick(node){
          this.categoryId="";
          //判断该节点是叶子节点
            if(node.children.length==0){
              this.categoryId=node.categoryId;
              //获取到被点击的叶子节点的id值
                this.axios.get("/attrGroup/selectGroupsByCateId/"+node.categoryId).then((resp)=>{
                  this.attrGroups=resp.data;
                })
            }
        },
        openDialog(groupId){
          this.dialogFormVisible=true;//让弹出层显示出来。
          this.groupId=groupId;
          //给弹出层里面的穿梭框左侧赋值
          this.axios.get("/attr/selectAttrByCateId/"+this.categoryId).then((resp)=>{
            this.attrList=resp.data;
          });
          //给穿梭框右侧赋值，从数据库里面把该分组下面的属性id查询出来付给attrIds属性就可以了。
          this.axios.get("/attrAttrgroupRelation/selectRelationByGroupId/"+groupId).then((resp)=>{
            this.attrIds=resp.data.map((relation)=>{return relation.attrId});
          })
        },
        saveRelation(){
          //dialog关闭
          this.dialogFormVisible=false;
          //发出ajax请求
          this.axios.post("/attrAttrgroupRelation/saveAttrGroupRelation",{groupId:this.groupId,attrIds:this.attrIds}).then(()=>{
            //提示保存成功信息
            this.$message.success("关联属性成功！")
          })
        }
      }
    }
</script>

<style scoped>

</style>
